
<template>
  <div class="container">
    <div class="top">
      <topLeft/>
      <topMiddle/>
      <topRight/>
    </div>

    <div class="middle">
      <div class="middle-left-box">
        <middleChart/>
      </div>
      <div class="middle-right-box">
        <middleRight/>
      </div>
    </div>
    <div class="bottom">
      <div class="bottom-left-box">
        <bottomLeft/>
      </div>
      <div class="bottom-middle-box">
        <bottomMiddle/>
      </div>
      <div class="bottom-right-box">
        <bottomRight/>
      </div>
    </div>

  </div>
</template>
<script>
import topLeft from './componentsNew/topLeft.vue'
import topMiddle from '@/views/dashboard/componentsNew/topMiddle.vue'
import topRight from '@/views/dashboard/componentsNew/topRight.vue'
import middleChart from '@/views/dashboard/componentsNew/middleChart.vue'
import middleRight from '@/views/dashboard/componentsNew/middleRight.vue'
import bottomLeft from '@/views/dashboard/componentsNew/bottomLeft.vue'
import bottomMiddle from '@/views/dashboard/componentsNew/bottomMiddle.vue'
import bottomRight from '@/views/dashboard/componentsNew/bottomRight.vue'
export default {
  name: 'DashBoard',
  components: { topLeft, topMiddle, topRight, middleChart, middleRight, bottomLeft, bottomMiddle, bottomRight }
}
</script>

<style scoped lang="scss">
.container{
  box-sizing: border-box;

  .top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    height: 11.094vw;
    padding: 0 0.781vw;
    background-color: var(--el-bg-color);
    border-radius: 0 0.26vw 0.26vw;
  }

  .middle{
    display: flex;
    width: 100%;
    margin-top: 1.042vw;

    .middle-left-box{
      background-color:var(--el-bg-color);
      border-radius: 0.26vw;
    }

    .middle-right-box{
width: 60%;
      margin-left: 1.042vw;
      border-radius: 0.26vw;
    }
  }

  .bottom{
    display: flex;
    box-sizing: border-box;
    margin-top: 1.042vw;

    .bottom-left-box{
      width: 32.813vw;
      height: 14.219vw;
      margin-right: 1.042vw;
      background-color: var(--el-bg-color);
      border-radius: 0.26vw;
    }

    .bottom-middle-box{
      width: 32.813vw;
      height: 14.219vw;
      background-color: var(--el-bg-color);
      border-radius: 0.26vw;
    }

    .bottom-right-box{
      width: 60%;
      height: 14.219vw;
      margin-left: 1.042vw;
      background-color: var(--el-bg-color);
      border-radius: 0.26vw;
    }
  }
}

</style>
